<script setup lang="ts">

import MsgBox from "/@/views/chat/components/ChatBox/MsgBox.vue";
import MemberUser from "/src/views/chat/components/ChatBox/MemberUser.vue";
import Session from "/@/views/chat/components/ChatBox/Session.vue";
import {RoomTypeEnum} from "/@/utils/enum";
import {useWebSocketStore} from "/@/store";
import {storeToRefs} from "pinia";

const webSocketStore = useWebSocketStore();

const {currentMemberList, currentContact, currentAllMessageList} = storeToRefs(webSocketStore);

</script>

<template>
    <div class="chat-outer">
        <el-row :gutter="5" class="contain">
            <el-col :span="4">
                <Session></Session>
            </el-col>
            <el-col :span="20">
                <el-row v-if="webSocketStore.type===RoomTypeEnum.Group" class="msg">
                    <el-col :span="20">
                        <MsgBox></MsgBox>
                    </el-col>
                    <el-col :span="4">
                        <MemberUser></MemberUser>
                    </el-col>
                </el-row>
                <el-row v-else class="msg">
                    <el-col :span="24">
                        <MsgBox></MsgBox>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<style lang="scss" scoped>
.chat-outer {
  width: 100%;
}

.msg {
  width: 100%;
}

.contain {
  width: 100%;
}
</style>